<template>
    <div class="app-container">
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <span>{{ isEdit ? '编辑门店' : '添加门店' }}</span>
                </div>
            </template>

            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" v-loading="loading">
                <el-form-item label="门店名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入门店名称" />
                </el-form-item>

                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址" />
                </el-form-item>

                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入联系电话" />
                </el-form-item>

                <el-form-item label="营业时间" prop="openingHours">
                    <el-input v-model="form.openingHours" placeholder="例如：10:00 - 22:00" />
                </el-form-item>

                <el-form-item label="经度" prop="longitude">
                    <el-input-number v-model="form.longitude" :precision="6" :step="0.000001" placeholder="请输入经度" />
                </el-form-item>

                <el-form-item label="纬度" prop="latitude">
                    <el-input-number v-model="form.latitude" :precision="6" :step="0.000001" placeholder="请输入纬度" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">提交</el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { addStore, updateStore, getStoreDetail } from '../../api/store'

const router = useRouter()
const route = useRoute()
const isEdit = ref(false)
const loading = ref(false)
const formRef = ref(null)

const form = reactive({
    id: null,
    name: '',
    address: '',
    phone: '',
    openingHours: '',
    latitude: null,
    longitude: null,
})

const rules = {
    name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
}

onMounted(() => {
    const storeId = route.params.id
    if (storeId) {
        isEdit.value = true
        form.id = storeId
        loading.value = true
        getStoreDetail(storeId)
            .then(res => {
                Object.assign(form, res.data)
            })
            .finally(() => {
                loading.value = false
            })
    }
})

const handleSubmit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            const apiCall = isEdit.value ? updateStore(form) : addStore(form)
            apiCall.then(() => {
                ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
                router.push('/store/list')
            })
        }
    })
}

const handleCancel = () => {
    router.push('/store/list')
}
</script>

<style scoped>
.app-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-input-number {
    width: 100%;
}
</style>